﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Windows.Toolbar.Controls.Specialized.ColorPickerItem" 
    Width="11" Height="11">

	<Grid Background="Transparent">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="CommonStates">
				<VisualState x:Name="Normal"/>
				<VisualState x:Name="Focused">
                    <Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="RootElement">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Thickness>1</Thickness>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
                    </Storyboard>
				</VisualState>
			</VisualStateGroup>
			<VisualStateGroup x:Name="SelectionStates">
				<VisualState x:Name="Unselected"/>
				<VisualState x:Name="Selected">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionBorder">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
				</VisualState>
			</VisualStateGroup>
			<VisualStateGroup x:Name="MouseStates">
				<VisualState x:Name="MouseOut"/>
				<VisualState x:Name="MouseOver">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverBorder">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid x:Name="RootElement" Background="Transparent" />

            <Border x:Name="MouseOverBorder" Margin="-1" 
			    Visibility="Collapsed" BorderThickness="1" BorderBrush="Orange" />
            
            <Border x:Name="SelectionBorder" Margin="-1" 
			    Visibility="Collapsed" BorderThickness="1" BorderBrush="Red" />
        </Grid>
	</Grid>
</UserControl>
